<template>
  <div>
    <div id="myChart" :style="{ width: '1500px', height: '600px' }"></div>
    <div ref='mapbox' style='height:600px;width:1500px'></div>
  </div>

</template>

<script>
import {getChinaData} from '@/api/chart/china'
//import * as echarts from "echarts";
import echarts from 'echarts';
import axios from 'axios'

import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
const option = {
  title:{

    subtext:"中国当前各省份新冠累积确诊数量",

  },
// ----------   series：地图数据可视化，添加data数据    ---------------------

  series:[{
    name:"确诊人数",
    type:'map', // 告诉echarts 要去渲染的是一个地图
    map:'china',// 告诉echarts  要去渲染中国地图
    label:{    // 控制对应地区的汉字
      show:true,
      color:'#333',// 控制地区名的字体颜色---黑色，省名字
      fontSize:10
    },
    itemStyle:{      // 地图板块的颜色和边框---灰色，各个省界线
      areaColor:'#eee',
      // borderColor:'blue'
    },
    roam:true,
    zoom:1.2,// 控制地图的放大和缩小
    emphasis:{    // 控制鼠标滑过之后的背景色和字体颜色--白色
      label:{
        color:'#fff',
        fontSize:12
      },
      itemStyle:{
        areaColor:'#83b5e7'   //  滑动到哪个地区就显示蓝色
      }
    },
    data:[]    // 用来展示后台给的数据的 {name:xx,value:xxx}
  }],

//-----------    visualMap：视觉映射，每个颜色代表什么含义   -----------------------------
  visualMap:[{
    type:'piecewise',
    show:true,
    // splitNumber:4
    pieces:[           // 分段
      {min:10000},
      {min:1000,max:9999},
      {min:100,max:999},
      {min:10,max:99},
      {min:1,max:9}
    ],
    // align:'right',// 默认left
    // orient:'horizontal' 默认竖直
    // left right 这些属性控制 分段坐在的位置
    // showLabel:false
    // textStyle:{}
    inRange:{
      symbol:'rect',
      color:['#ffc0b1','#9c0505']   //   浅红~~深红色
    },
    itemWidth:20,
    itemHeight:10
  }],

//-------------------------------------------------------------------
  tooltip:{
    trigger:'item'
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      // dataView: {readOnly: false},
      // restore: {},
      saveAsImage: {}
    }
  },
};

export default {
  name: 'ChinaMap',
  data() {
    return {}
  },
  mounted() {
    this.getData();// 为什么不再created
    this.mychart = echarts.init(this.$refs.mapbox);
    //  this.mychart.setOption(option);
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    //声明jsonp函数
    function jsonp(url, callback, callbackname) { //给系统中创建一个全局变量，叫做callbackname，指向callback函数名
      //定义一个处理Jsonp返回数据的回调函数
      window[callbackname] = callback;
      //创建一个script节点
      var script = document.createElement("script");
      script.src = url;
      script.type = "text/javascript";
      document.getElementsByTagName("body")[0].appendChild(script); //将创建的新节点添加到BOM树上
      setTimeout(function () {
        document.body.removeChild(script); //为了不污染页面，把script拿掉
      }, 500);
    }
    console.log("数据来源：" + "%c https://m.look.360.cn", "color:#00cc00");
    var jsonpURL = 'https://m.look.360.cn/events/feiyanTrend?sv=&version=&market=&device=2&net=4&stype=&scene=&sub_scene=&refer_scene=&refer_subscene=&f=jsonp&_=1581431223974&callback=jsonp2&callback=jsonp2';
    //调用jsonp函数发送jsonp请求的callback
    jsonp(jsonpURL, function (data) {
      var chartsJSON = data.data.timeline; // 发送请求成功后开始执行，data是请求成功后，返回的数据
      console.log(chartsJSON);
      var dateTime = [],		//日期
          diagnosed_add = [], //新增确诊
          suspected_add = [], //新增疑似
          cured_add = [],     //新增治愈
          died_add = [];      //新增死亡

      chartsJSON.reverse(); //排序

      //for循环chartsJSON
      for (var i = 0; i < chartsJSON.length - 1; i++) {
        dateTime.push(chartsJSON[i].total.dateTime);
        diagnosed_add.push(chartsJSON[i].total.diagnosed_add);
        suspected_add.push(chartsJSON[i].total.suspected_add);
        cured_add.push(chartsJSON[i].total.cured_add);
        died_add.push(chartsJSON[i].total.died_add);
      };
      //统计
      const subTotal = data.data.total;
      var sumModifyTime = subTotal.modifyTime,	  //时间
          sumConfirmed = subTotal.currentConfirmed, //现有确诊
          sumDiagnosed = subTotal.diagnosed,        //累计确诊
          sumSerious = subTotal.serious,        	  //重症
          sumOverseasInput = subTotal.overseasInput,//境外输入确诊
          sumSuspected = subTotal.suspected,    	  //现有疑似
          sumCured = subTotal.cured,            	  //治愈
          sumDied = subTotal.died;              	  //死亡
      //较昨日
      const subDiff = data.data.newDiff;
      var diffConfirmed = subDiff.currentConfirmed,
          diffDiagnosed = subDiff.diagnosed,
          diffSerious = subDiff.serious,
          diffOverseasInput = subDiff.overseasInput,
          diffSuspected = subDiff.suspected,
          diffCured = subDiff.cured,
          diffDied = subDiff.died;
      diffConfirmed < 0 ? diffConfirmed = diffConfirmed : diffConfirmed = "+" + diffConfirmed;
      diffDiagnosed < 0 ? diffDiagnosed = diffDiagnosed : diffDiagnosed = "+" + diffDiagnosed;
      diffSerious < 0 ? diffSerious = diffSerious : diffSerious = "+" + diffSerious;
      diffOverseasInput < 0 ? diffOverseasInput = diffOverseasInput : diffOverseasInput = "+" + diffOverseasInput;
      diffSuspected < 0 ? diffSuspected = diffSuspected : diffSuspected = "+" + diffSuspected;
      diffCured < 0 ? diffCured = diffCured : diffCured = "+" + diffCured;
      diffDied < 0 ? diffDied = diffDied : diffDied = "+" + diffDied;

      var subFunc = ['截止：' + sumModifyTime + '\n' +
      '现有确诊: {a| ' + sumConfirmed + '}', '较昨日:{g| ' + diffConfirmed + '}', '现有疑似: {b| ' + sumSuspected + '}', '较昨日:{h| ' + diffSuspected + '}', '境外输入确诊: {c| ' + sumOverseasInput + '}', '较昨日:{i| ' + diffOverseasInput + '}' + '\n' +
      '累计确诊: {a| ' + sumDiagnosed + '}', '较昨日:{g| ' + diffDiagnosed + '}', '重症病例: {d| ' + sumSerious + '}', '较昨日:{j| ' + diffSerious + '}', '治愈人数: {f| ' + sumCured + '}', '较昨日:{l| ' + diffCured + '}', '死亡人数: {e| ' + sumDied + '}', '较昨日:{k| ' + diffDied + '}'
      ].join('\xa0\xa0');

      myChart.setOption({
        backgroundColor: '#f8f8f8', //背景色
        title: {
          text: '全国疫情新增病例趋势图',
          textStyle: {
            color: '#000',
            fontSize: 18
          },
          itemGap: 5,
          subtext: subFunc,
          subtextStyle: {
            color: '#333',
            fontSize: 14,
            rich: {
              a: {
                color: '#b61e33',
                fontSize: 15
              },
              b: {
                color: '#f4a313',
                fontSize: 15
              },
              c: {
                color: '#eb4c2c',
                fontSize: 15
              },
              d: {
                color: '#e56617',
                fontSize: 15
              },
              e: {
                color: '#0c2e47',
                fontSize: 15
              },
              f: {
                color: '#34cbc4',
                fontSize: 15
              },
              g: {
                color: '#b61e33',
                fontSize: 12
              },
              h: {
                color: '#f4a313',
                fontSize: 12
              },
              i: {
                color: '#eb4c2c',
                fontSize: 12
              },
              j: {
                color: '#e56617',
                fontSize: 12
              },
              k: {
                color: '#0c2e47',
                fontSize: 12
              },
              l: {
                color: '#34cbc4',
                fontSize: 12
              }
            }
          },
          x: 'center'
        },
        tooltip: {
          trigger: 'axis', //axis , item
          axisPointer: {
            type: 'line', //'line' | 'cross' | 'shadow' | 'none
            lineStyle: {
              color: '#c9caca',
              width: 1,
              type: 'dotted'
            }
          },
          x: 'left',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          top: '10%',
          right: '2%',
          bottom: '5%',
          left: '5%'
        },
        legend: {
          data: ['新增确诊', '新增疑似', '新增治愈', '新增死亡'],
          x: 'right'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: 0,
            interval: 0, //类目间隔 设置为 1，表示(隔一个标签显示一个标签)
            textStyle: {
              color: '#333',
              fontSize: 12
            },
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(102,102,102,.1)', //纵向网格线颜色
              width: 1,
              type: 'dashed'
            }
          },
          axisTick: {
            show: true //坐标轴小标记
          },
          data: dateTime //载入横坐标数据
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: 12
            },
            formatter: '{value}'
          },
          splitNumber: 4, //y轴刻度设置(值越大刻度越小)
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(102,102,102,.1)', //横向网格线颜色
              width: 1,
              type: 'dashed'
            }
          }
        },
        color: ['rgb(255, 53, 55)', 'rgb(255, 160, 25)', 'rgb(17, 191, 199)', 'rgba(77, 80, 84, 0.7)'],
        series: [
          {
            name: '新增确诊',
            type: 'line', //line
            symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbolSize: 12, //曲线点大小
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            lineStyle: {
              normal: {
                width: 2
              }
            },
            smooth: true,
            data: diagnosed_add //载入数据
          },
          {
            name: '新增疑似',
            type: 'line', //line
            symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbolSize: 12, //曲线点大小
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            lineStyle: {
              normal: {
                width: 2
              }
            },
            smooth: true,
            data: suspected_add //载入数据
          },
          {
            name: '新增治愈',
            type: 'line', //line
            symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbolSize: 12, //曲线点大小
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            lineStyle: {
              normal: {
                width: 2
              }
            },
            smooth: true,
            data: cured_add //载入数据
          },
          {
            name: '新增死亡',
            type: 'line', //line
            symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbolSize: 12, //曲线点大小
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            lineStyle: {
              normal: {
                width: 2
              }
            },
            smooth: true,
            data: died_add //载入数据
          }
        ]
      });
      //使用刚指定的配置项和数据显示图表。
      //    myChart.setOption(option);

      var app = {
        currentIndex: -1,
      };
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });

        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });

        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });

      }, 3000);

    }, "jsonp2");
  },
  methods:{
    getData(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{},(err,data)=>{
        if(!err){             // 代表请求数据成功
          console.log(data);
          let list = data.data.list.map(item=>({name:item.name,value:item.value}))
          console.log(list);
          option.series[0].data = list;
          this.mychart.setOption(option);
          // 这行代码能执行的前提是 DOM已经渲染完成，只有DOM渲染完成才能够执行 echarts初始化
        }
      })
    },
    showchina() {
      let myEchart1 = echarts.init(this.$refs.chart1);
      let  option = {
        title:{
          text:"cookie_fzx",

          subtext:"中国当前各省份新冠累积确诊数量",
          /*   sublink:"https://blog.csdn.net/image_fzx"*/
        },
// ----------   series：地图数据可视化，添加data数据    ---------------------

        series:[{
          name:"确诊人数",
          type:'map', // 告诉echarts 要去渲染的是一个地图
          map:'china',// 告诉echarts  要去渲染中国地图
          label:{    // 控制对应地区的汉字
            show:true,
            color:'#333',// 控制地区名的字体颜色---黑色，省名字
            fontSize:10
          },
          itemStyle:{      // 地图板块的颜色和边框---灰色，各个省界线
            areaColor:'#eee',
            // borderColor:'blue'
          },
          roam:true,
          zoom:1.2,// 控制地图的放大和缩小
          emphasis:{    // 控制鼠标滑过之后的背景色和字体颜色--白色
            label:{
              color:'#fff',
              fontSize:12
            },
            itemStyle:{
              areaColor:'#83b5e7'   //  滑动到哪个地区就显示蓝色
            }
          },
          data:[]    // 用来展示后台给的数据的 {name:xx,value:xxx}
        }],

//-----------    visualMap：视觉映射，每个颜色代表什么含义   -----------------------------
        visualMap:[{
          type:'piecewise',
          show:true,
          // splitNumber:4
          pieces:[           // 分段
            {min:10000},
            {min:1000,max:9999},
            {min:100,max:999},
            {min:10,max:99},
            {min:1,max:9}
          ],
          // align:'right',// 默认left
          // orient:'horizontal' 默认竖直
          // left right 这些属性控制 分段坐在的位置
          // showLabel:false
          // textStyle:{}
          inRange:{
            symbol:'rect',
            color:['#ffc0b1','#9c0505']   //   浅红~~深红色
          },
          itemWidth:20,
          itemHeight:10
        }],

//-------------------------------------------------------------------
        tooltip:{
          trigger:'item'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            // dataView: {readOnly: false},
            // restore: {},
            saveAsImage: {}
          }
        },
      };

      myEchart1.setOption(option);
    },
    showCurrentChart() {
      let myEchart2 = echarts.init(this.$refs.chart2);
      let option = {
        title: {
          text: '当日现存病患变化图'
        },
        color: '#2f4554',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Current']
        },
        xAxis: {
          type: 'category',
          data: this.date
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {},
            dataView: { show: true, readOnly: false },
          }
        },
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 100,
            grid: {
              bottom: "70px"
            }
          },
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        series: [
          {
            data: this.current,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,		//开启显示
                  position: 'top',	//在上方显示
                  textStyle: {	    //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      };
      myEchart2.setOption(option);
    },

  }
}


</script>

<style lang="less" scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.map {
  width: 80%;
  height: 400px;
}
</style>